<template>
  <div class="app-container">

    <list-page-container>

      <template slot="query">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">

          <el-form-item label="保单所属组织" prop="areaCode">
            <el-cascader
                placeholder="请选择保单所属组织"
                @change="setCurrentAreaNameAndQueryData"
                v-model="queryParams.areaCode"
                :options="areaData"
                :props="{ checkStrictly: true,label:'orgName',value:'orgCode' }">
            </el-cascader>
          </el-form-item>
          <el-form-item label="保单所属年份" prop="orderYear">
            <el-date-picker
                @change="handleQuery"
                v-model="queryParams.orderYear"
                value-format="yyyy"
                type="year"
                placeholder="选择年">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="作物类型" prop="zwlx">
            <el-select v-model="queryParams.zwlx">
              <el-option
                  v-for="item in zwlxDict"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="handel">
        <el-row class="handle-container" :gutter="10">
          <!--          <el-col :span="1.5">-->
          <!--            <el-button-->
          <!--                type="primary"-->
          <!--                plain-->
          <!--                icon="el-icon-plus"-->
          <!--                size="mini"-->
          <!--                @click="handleAdd"-->
          <!--            >新增-->
          <!--            </el-button>-->
          <!--          </el-col>-->
          <!--          <el-col :span="1.5">-->
          <!--            <el-button-->
          <!--                type="danger"-->
          <!--                plain-->
          <!--                icon="el-icon-delete"-->
          <!--                size="mini"-->
          <!--                :disabled="multiple"-->
          <!--                @click="handleDelete"-->
          <!--            >删除-->
          <!--            </el-button>-->
          <!--          </el-col>-->
          <el-col :span="1.5">
            <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
            >导出
            </el-button>
          </el-col>
        </el-row>
      </template>

      <template slot="table">
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
          <!--          <el-table-column type="selection" width="55" align="center"/>-->
          <el-table-column label="保单数量" align="center" prop="bdsl"/>
          <el-table-column label="承灾面积" align="center" prop="czmj"/>
          <el-table-column label="区域名称" align="center" prop="orgName"/>
          <el-table-column label="总保费" align="center" prop="zbj"/>
          <el-table-column label="种植面积" align="center" prop="zzmj"/>
          <el-table-column label="作物类型" align="center" prop="zwlx"/>
          <!--          <el-table-column label="修改时间" align="center" prop="updateTime"/>-->
          <!--          <el-table-column label="创建人" align="center" prop="createBy"/>-->
          <!--          <el-table-column label="修改人" align="center" prop="updateBy"/>-->
          <!--          <el-table-column label="是否删除"-->
          <!--                           align="center"-->
          <!--                           prop="deleted"-->
          <!--                           :formatter="deletedFormat"-->
          <!--          />-->
          <!--          <el-table-column width="300" label="操作" align="center" class-name="small-padding fixed-width">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button-->
          <!--                  size="mini"-->
          <!--                  type="text"-->
          <!--                  icon="el-icon-edit"-->
          <!--                  @click="handleUpdate(scope.row)"-->
          <!--              >修改-->
          <!--              </el-button>-->
          <!--              <el-button-->
          <!--                  size="mini"-->
          <!--                  type="text"-->
          <!--                  icon="el-icon-delete"-->
          <!--                  @click="handleDelete(scope.row)"-->
          <!--              >删除-->
          <!--              </el-button>-->
          <!--              <el-button-->
          <!--                  size="mini"-->
          <!--                  type="text"-->
          <!--                  icon="el-icon-view"-->
          <!--                  @click="fieldInfo(scope.row)"-->
          <!--              >地块信息-->
          <!--              </el-button>-->
          <!--              <el-button-->
          <!--                  size="mini"-->
          <!--                  type="text"-->
          <!--                  icon="el-icon-view"-->
          <!--                  @click="historyInfo(scope.row)"-->
          <!--              >历史保单信息-->
          <!--              </el-button>-->
          <!--              <el-button-->
          <!--                  size="mini"-->
          <!--                  type="text"-->
          <!--                  icon="el-icon-view"-->
          <!--                  @click="gatherInfo(scope.row)"-->
          <!--              >采集信息-->
          <!--              </el-button>-->

          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
      </template>
    </list-page-container>


    <el-dialog :title="title" :visible.sync="open" width="530px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入农户身份证号"/>
        </el-form-item>
        <el-form-item label="农户银行卡" prop="peasantHouseholdBankCard">
          <el-input v-model="form.peasantHouseholdBankCard" placeholder="请输入农户银行卡号"/>
        </el-form-item>
        <el-form-item label="农户开户行" prop="peasantHouseholdOpeningBank">
          <el-input v-model="form.peasantHouseholdOpeningBank" placeholder="请输入用户农户开户行号"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactInformation">
          <el-input v-model="form.contactInformation" placeholder="请输入农户联系方式"/>
        </el-form-item>
        <el-form-item label="采集单号" prop="collectionOrderNumber">
          <el-input v-model="form.collectionOrderNumber" placeholder="请输入农户采集单号"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="80%"
        @close="closeDialogTable">
      <div>
        <!--        <el-empty description="暂无数据"></el-empty>-->
        <el-table :data="dialogTableData">
          <el-table-column
              v-for="item in dialogTableColumn"
              :key="item.prop"
              :label="item.label"
              align="center"
              :prop="item.prop"
          />
          <el-table-column width="200"
                           v-if="dialogTitle=='地块信息'"
                           label="操作"
                           align="center"
                           class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-map-location"
                  @click="jumpChitInfoLook(scope.row)"
              >地块位置
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>

import {
  getFarmersList,
  addFarmerInfo,
  updateFarmerInfo,
  delFarmerInfo, getFarmerInfoById,
  queryPlot,
  queryHistoryOrder,
  queryAcquisition,
  queryZwlxDict
} from "@/api/farmersFile";
import {statisticStatement} from "@/api/baseData"
import {listDept} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import {OPERATE_TYPE} from "@/constantData";
import {getAreaData} from "@/utils/getAreaData";
import {extractTwoLevels} from "@/utils/baseUtil";
import {exportFile} from "@/utils/exportFile";
import _ from "lodash";

export default {
  dicts: ['enum_user_state', 'enum_user_type'],
  components: {Treeselect},
  name: "StatisticalTable",
  data() {
    return {
      areaData: [],
      currentAreaName: '扎赉特旗',
      baseAreaData: [],
      //条目id
      itemId: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaCode: ['152223'],
        orderYear: '2023',
        zwlx:null
      },
      dataList: [],
      total: 0,
      loading: false,
      multiple: true,
      open: false,
      open2: false,
      // 弹出层标题
      title: "",
      form: {},
      baseForm: {
        name: null,
        idCard: null,
        peasantHouseholdBankCard: null,
        peasantHouseholdOpeningBank: null,
        contactInformation: null,
        collectionOrderNumber: null,
      },
      // 表单校验
      rules: {
        contactInformation: [
          {required: true, message: "用户手机号不能为空", trigger: "blur"}
        ],
        name: [
          {required: true, message: "用户姓名不能为空", trigger: "blur"}
        ],
        idCard: [
          {required: true, message: "用户身份证号不能为空", trigger: "blur"}
        ],
        peasantHouseholdBankCard: [
          {required: true, message: "银行卡号不能为空", trigger: "blur"}
        ],
        peasantHouseholdOpeningBank: [
          {required: true, message: "开户行号不能为空", trigger: "blur"}
        ],
        collectionOrderNumber: [
          {required: true, message: "采集单号不能为空", trigger: "blur"}
        ],
      },

      // 选中数组
      ids: [],
      deptOptions: [],
      hanType: '',
      OPERATE_TYPE,

      //控制弹框表格开关
      dialogVisible: false,
      dialogTitle: '信息', //弹框title
      dialogTableData: [], //弹框表格数据
      dialogTableColumn: [],//弹框表格表头数据
      zwlxDict:[]//作物类型
    }
  },
  methods: {
    initZwlxData(){
      queryZwlxDict().then(res=>{
        this.zwlxDict = res.data
      })
    },
    async initAreaData() {
      let {threeData, baseData} = await getAreaData();
      this.baseAreaData = baseData
      this.areaData = extractTwoLevels(threeData);
    },

    setCurrentAreaNameAndQueryData(value) {
      const lastAreaCode = value.at(-1)
      this.currentAreaName = this.baseAreaData.find(item => item.orgCode === lastAreaCode)?.orgName
      this.handleQuery()
    },


    jumpChitInfoLook(row) {
      let id = row.orderBaseDetailVo.id;
      this.$router.push({name: 'chitInformationLook', query: {chitId: id, jumpSign: 'farmersFile'}})
    },
    //以下为操作弹窗
    openDialogTable() {
      this.dialogVisible = true;
    },
    closeDialogTable() {
      this.dialogVisible = false;
    },
    fieldInfo(row) {
      this.loading = true;
      this.dialogTitle = '地块信息'
      this.dialogTableColumn = [
        {
          label: '地块名称',
          prop: 'dkmc',
        },
        {
          label: '地块序号',
          prop: 'dkxh',
        },
        {
          label: '地块类型',
          prop: 'dklx',
        },
        {
          label: '地块种植数量',
          prop: 'dkzzsl',
        },
        {
          label: '有无灌溉条件',
          prop: 'ywggtj',
        },
      ]
      queryPlot(row.id).then(res => {
        if (res && res.code == 200) {
          if (res.data && Array.isArray(res.data)) {
            this.dialogTableData = res.data;
            this.openDialogTable();
            this.loading = false;
          }
        }
      })

    },
    historyInfo(row) {
      this.loading = true;
      this.dialogTitle = '历史保单信息'
      this.dialogTableColumn = [
        {
          label: '保单编号',
          prop: 'serialNo',
        },
        {
          label: '保单年份',
          prop: 'orderYear',
        },
        {
          label: '投保单号',
          prop: 'tbdh',
        },
        {
          label: '险种名称',
          prop: 'xzmc',
        },
        {
          label: '投保人',
          prop: 'tbr',
        },
      ]
      queryHistoryOrder(row.id).then(res => {
        if (res && res.code == 200) {
          if (res.data && Array.isArray(res.data)) {
            this.dialogTableData = res.data;
            this.openDialogTable();
            this.loading = false;
          }
        }
      })

    },
    gatherInfo(row) {
      this.loading = true;
      this.dialogTitle = '采集信息'
      this.dialogTableColumn = [
        {
          label: '姓名',
          prop: 'personName',
        },
        {
          label: '投保面积(平方米)',
          prop: 'area',
        },
        {
          label: '业务人员姓名',
          prop: 'businessPersonName',
        },
        {
          label: '联系方式',
          prop: 'contact',
        },
        {
          label: '身份证号码',
          prop: 'idCardNum',
        },
        {
          label: '经度',
          prop: 'longitude',
        },
        {
          label: '纬度',
          prop: 'latitude',
        },
        {
          label: '地块面积',
          prop: 'massif',
        },
        {
          label: '种植作物类型',
          prop: 'plantType',
        },
        {
          label: '投保金额',
          prop: 'money',
        },
      ]
      queryAcquisition(row.id).then(res => {
        if (res && res.code == 200) {
          if (res.data && Array.isArray(res.data)) {
            this.dialogTableData = res.data;
            this.openDialogTable();
            this.loading = false;
          }
        }
      })

    },

    //映射是否删除
    deletedFormat(row) {

      if (row.deleted === '1') {
        return '是';
      } else if (row.deleted === '0') {
        return '否'
      } else {
        return null
      }

    },


    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        areaCode: ['152223'],
        orderYear: '2023',
      }
      this.handleQuery();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const dictId = row.id
      this.hanType = OPERATE_TYPE.UPDATE
      getFarmerInfoById({id: dictId}).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改农户信息";
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      let bufferData = _.cloneDeep(this.queryParams)
      bufferData.areaCode = bufferData.areaCode != null && Array.isArray(bufferData.areaCode) && bufferData.areaCode?.length > 0 ? bufferData.areaCode.at(-1) : ''
      exportFile({
        path: '/business/insuranceOrder/orderManager/exportStatisticStatement',
        fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        params: bufferData,
        fileName: '统计报表.xls',
        method: 'get'
      }).then(res => {
        this.$message.success('导出成功')
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dictIds = row.id || this.ids.join(',');
      this.$modal.confirm('是否确认删除当前数据项？').then(function () {
        return delFarmerInfo({ids: dictIds});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFarmerInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFarmerInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    // 表单重置
    reset() {
      this.form = _.cloneDeep(this.baseForm);
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.hanType = OPERATE_TYPE.ADD
      this.open = true;
      this.title = "添加农户";
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      let bufferData = _.cloneDeep(this.queryParams)
      bufferData.areaCode = bufferData.areaCode != null && Array.isArray(bufferData.areaCode) && bufferData.areaCode?.length > 0 ? bufferData.areaCode.at(-1) : ''
      statisticStatement(bufferData).then(response => {
            this.dataList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
      );
    },
    getDeptList() {
      let owner = this
      listDept().then(response => {
        owner.deptOptions = this.handleTree(response.data, "orgCode", 'parentCode');
      });
    }
  },
  async created() {
    this.initZwlxData();
    await this.initAreaData()

    this.getList();
    this.getDeptList()
  },
  updated() {

  }
}
</script>

<style scoped>

</style>
